	html,body{
		width: 100%;
		height: 100%;
		background-color: #ededed;
	}
	.chatPageBox{ 
		width: 100%;
		height: 100%;
	}
.fixedtop{
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 10;
	font-size: .4rem;
}
.getBack{
	background: #fff;
	height: 1rem;
	line-height: 1rem;
	text-align: center;
	border-bottom: 1px solid #f3f3f3;
}
.arrowbox{
	position: absolute;
	left: 0;
	top: 0;
	width: 1rem;
	height: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.getBack img{
	width: .3rem;
	height: .5rem;
}
.dingdan{
    position: absolute;
    right: 0rem;
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dingdan .oicon1{
	width: .4rem;
	height: .1rem;
}
.fixedtop .van-button__text{
	display: flex;
}
.fixedtop .van-button--default{
	border: none;
}
	
	.inpbox{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1.2rem;
		display: flex;
		align-items: center;
		background-color: fff;
	}
	.inpbox input{
		background-color: #eee;
		width: 80%;
		height: 1.2rem;
	}
	.send{
		padding: 5upx;
		color: #fff;
		background-color: #4CD964;
		border-radius: .1rem;
	}
	.box{
		/* height: 100upx; */
		padding-bottom: 1rem;
	}
	
	.room_bar {
		width: 100%;
		height: auto;
		position: fixed;
		bottom: 0;
		right: 0;
		z-index: 1;
		transform: translateZ(1000px);
	}
	
	.other_func {
		width: 100%;
		height: .9rem;
		display: flex;
	}
	.other_func_X{
		height: 1.2rem;
	}
	
	.other_func image {
		width: .5rem;
		height: .48rem;
	}
	
	.open_emoji,
	.send_image,
	.open_camera,
	.v-record {
		width: 48upx;
		height: 48upx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 48upx;
	}
	
	
	.v-record .icon-record {
		width: 18upx;
		height: 40upx;
	}
	.v-record{
		margin-left: 48upx;
	}
	.open_camera, .send_image{
		margin-left: 64upx;
	}
	
	
.text-input {
	width: 100%;
	height: 1.6rem;
	padding: 0;
	display: flex;
	align-items: center;
	background-color: #f6f6f6;
	/* padding-top: .2rem; */
}
.text-input textarea{
	background-color: #fff;
	border: none;
	line-height: .45rem;
	height: 1.2rem;
	outline: none;
	resize: none;
	font-size: .42rem;
}

.news {
    width: 73%;
    height: 1rem;
    font-size: .38rem;
    padding: 0 .2rem;
    line-height: 1rem;
    border-radius: .1rem;
    margin-left: .3rem;
}
.sendbtn{
	flex:1;
	height: 1.2rem;
	line-height: 1.2rem;
	border-radius: .1rem;
	background-color: #09c063;
	color: #fff;
	font-size: .38rem;
	text-align: center;
	margin: 0 .25rem;
}
.nosendbtn{
	background-color: #d3f1e2;
}

.send_btn {
	width: 80upx;
	height: 60upx;
	line-height: 60upx;
	font-size: 17px;
	color: #000;
	padding: 0;
	display: inline-block;
	float: right;
	margin: 8upx 16upx auto auto;
	background-color: #fff;
}

.f-row{
	height:100upx;
	display:flex;
	align-items:center;
}
/*.chat-bg{
	position:fixed;
	width: 100%;
	height: 100%;
	z-index: 0;
	top: 50px;
}*/
.wrap{
	width: 100%;
	/* height: 5rem; */
	position: absolute;
	overflow-y: scroll;
	/* display: flex; */
}
.scroll_view,
.scroll_view_change {
	/*width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 150upx;*/
	margin-bottom: 174upx;
	background-color: #FAFAFA;
}

.scroll_view_X,
.scroll_view_change_X{
	margin-bottom: 244upx;
}

.scroll_view_change {
	/*bottom: 440upx;*/
	margin-bottom: 590upx;
}

.message {
	width: 93%;
	height: auto;
	padding: 0 .3rem;
	position: relative;
	margin-bottom: .1rem;
}

.time {
	margin: 14upx 0;
	text-align: center;
}

.time .time-text {
	display: inline-block;
	padding: 6upx 20upx 0 20upx;
	font-size: 24upx;
	color: #fff;
	line-height: 28upx;
	border-radius: 4upx;
	background-color: #dcdcdc;
}

.user .user-text {
	margin: auto 1rem .1rem;
	font-size: .32rem;
	color: #dcdcdc;
	display: block;
	position: absolute;
	    
}
.self .user-text{
	right: .38rem;
}
.main .user-text{
	left: .38rem;
}

.avatar {
	width: 1rem;
	height: 1rem;
	/* margin: 0 .2rem 0 0; */
	border-radius: .1rem;
	float: left;
}

.msg {
	display: inline-block;
	padding: .15rem .2rem .15rem .2rem;
	max-width: 75%;
	min-height: .5rem; 
	font-size: .4rem;
	/*overflow: hidden;*/
	text-align: left;
	word-break: break-all;
	background-color: #fff;
	border-radius: .4rem;
	position: relative;
	margin-top: .5rem;
}

.msg .msg_poprightarrow {
	position: absolute;
	right: -0.15rem;
	height: .3rem;
	width: .3rem;
}

.msg .msg_popleftarrow{
	position:absolute;
	left: -0.15rem;
	height: .3rem;
	width: .3rem;
	/* margin-top: -10upx; */
}

.msg .msg-text {
	line-height: 40upx;
	font-size: 32upx;
	margin: 0;
}

/*.msg:before {
	content: " ";
	position: absolute;
	top: 9px;
	right: 100%;
	border: 6px solid transparent;
	border-right-color: #EDEDED;
}*/

.self {
	text-align: right;
}

.self .avatar {
	float: right;
	margin: 0 0 0 .3rem;
}
.main .avatar {
	float: left;
	margin: 0 .3rem 0 0;
}

.user {
	position: relative;
	bottom: -30upx;
}

.self .msg {
	background-color: #0873DE;
	color: #fff;
}

.self .msg:before {
	right: inherit;
	left: 100%;
	border-right-color: transparent;
	border-left-color: #b2e281;
}

.template {
	display: inline;
}
.err{
	width: 32upx;
	height: 32upx;
	position: absolute;
	left: -40upx;
}
.hide{
	display: none;
}
.show{
	display: block;
}
.wrap{
	background: #eee;
	padding-bottom:3rem;
	padding-top: 1.2rem;
}
.menuList{
	overflow: hidden;
	padding: 14upx 0;
	padding-bottom: 26upx;
	background-color: #f6f6f6;
}
.menuinner{
	float: left;
	display: flex;
	align-items: center;
	margin: .35rem 0;
    margin-left: .15rem;
}
.Emoji{
	width: .7rem;
	height: .7rem;
	margin: 0 .2rem;
}
.picbtnbox{
	position: relative;
	width: .8rem;
	height: .7rem;
	margin: 0 .2rem;
	overflow: hidden;
}
.picbtnbox input{
	position: absolute;
	left: 0;
	top: 0;
	font-size: .5rem;
	opacity: 0;
}
.picbtn{
	width: .8rem;
	height: .7rem;
}
.camerabtn{
	width: .8rem;
	height: .7rem;
	margin: 0 .2rem;
}
.audiobtn{
	width: .6rem;
	height: .7rem;
	margin: 0 .2rem;
}
.spbtn{
    width: .7rem;
    height: .5rem;
	margin: 0 .2rem;
}
.emojiitem{
	width: .72rem;
	height: .72rem;
	margin: .2rem;
}
.emojibox{
	padding: 0 5%;
}
@keyframes scrollUp{
	from
	{bottom:-375upx ;}
	to
	{bottom:0;}
}
@keyframes scrollDown{
	from
	{bottom:0;}
	to
	{bottom:-375upx ;}
}
.scrollview{
	position: relative;
	height: 372upx;
	background-color: #ededed;
	padding-bottom: 56upx;
}
.scrollup{
	animation: scrollUp .3s linear;
}
.scrolldown{
	animation: scrollDown .3s linear;
}
.emojidel{
	position: fixed;
	background: #fff;
	right: .2rem;
	bottom: .5rem;
	padding: .1rem .3rem;
	background-color: #fff;
	border-bottom-left-radius: .4rem;
	border-top-left-radius: .4rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.emojidel image{
	width: 60upx;
	height: 60upx;
}
.msginnerbox{
	/* display: inline; */
	float: left;
}
.emojiitem2{
	width: 50upx;
	height: 50upx;
	margin-top: -9upx;
}
.imgitem{
    max-width: 5rem;
	border-radius: .2rem;
}



.modal-record .modal-body {
	position: absolute;
	width: 7rem;
	height: 5rem;
	left: 50%;
	margin-left: -3.5rem;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: .1rem;
	box-shadow: 0 0 32upx rgba(0, 0, 0, 0.15);
}
.nocopybox{
position: absolute;
    left: 0;
    top: 2rem;
    width: 100%;
    height: .7rem;
    opacity: 0;
}
.modal {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;
	/* background: rgba(0,0,0,0.4); */
}
.recordcover{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(0,0,0,0.4);
}

.modal-record .desc {
    color: rgb(112, 126, 137);
    font-size: .4rem;
    margin-bottom: .3rem;
    display: block;
    width: 100%;
    text-align: center;
}

.modal-record .dot {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: #0873DE url('/statics/wxdemo/img/send.png') no-repeat;
	background-position: center;
    background-size: 40%;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* .dot img {
	width: .5rem;
} */

.sound-waves {
    width: 100%;
    box-sizing: border-box;
    padding-left: 10%;
    margin-top: .8rem;
    height: .8rem;
    text-align: center;
}
 
.sound-waves div {
  transition: all 0.5s;
  width: 1%;
  margin-left: 1.5%;
  margin-right: 1.5%;
  height: 3rem;
  background-color: #aaa;
  float: left;
}
.audio-player {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	transition: opacity .5s;
    padding-left: .6rem;
}
.main .audio-player{
	padding-left: 0;
	padding-right: .6rem;
}

.audio-player .controls {
	height:.7rem;
	align-items:center;
	display:flex;
}

.audio-player .controls .images {
	height: .5rem;
    width: .4rem;
    margin: 0 .2rem;
    transform: rotate(181deg);
}
.main .audio-player .controls .images {
	height: .5rem;
    width: .4rem;
    margin: 0 .2rem;
    transform: rotate(0deg);
}

.audio-player .time {
	font-size: .38rem;
	line-height: .38rem;
	flex: 1;
	text-align: left;
}

.videochatbox{
    position: absolute;
	width: 100%;
    left: 0;
    top: -.8rem;
    background: rgba(0,0,0,0.3);
    color: #fff;
    font-size: .4rem;
    padding: .1rem;
}
.outlinemesbox{
    width: 100%;
    padding: 6px 0;
    justify-content: center;
    display: flex;
}
.outlinemesbox p{
	background: rgba(0,0,0,0.3);
	color: #fff;
	display: inline-block;
	padding: 6px 10px;
	border-radius: 7px;
	font-size: 13px;
}

.localtracks_class{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 94%;
    background-color: #000;
    overflow: hidden;
    transition: all .5s;
    padding-top: 6%;
    padding-bottom: 6%;
	z-index: 1;
}
.localtracks_class_small{
	width: 11%;
	height: 7%;
}
#localtracks{
    width: 100%;
    height: 85%;
    margin-top: 5%;
}
.viddeobtnBox{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 14%;
	background: #888686;
	display: flex;
	align-items: center;
	justify-content: center;
}
.closevideo{
	width: 14%;
    margin: 0 13%;
}
.micphone{
	width: 7%;
}
.changbtn{
	width: 7%;
}
.spvideo{
    width: 8%;
}
.suofang{
	position: absolute;
    right: 22px;
    top: 17px;
	width: 40px;
	height: 40px;
}